<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script src="three/three.min.js"></script>
	<script>
		/**	
		 * 创建场景
		 */
		let scene = new THREE.Scene()
		/**
		 * 创建网络模型
		 */
		// 这是一个长方体
		let geometry = new THREE.BoxGeometry(100,50,50)
		let material = new THREE.MeshLambertMaterial({
			color: 0x0000ff
		})// 材质对象
		
		let mesh = new THREE.Mesh(geometry,material)
		scene.add(mesh) //网络模型添加道场景中
		
		/**
		 * 光源设置
		 */
		//点光源
		let point = new THREE.PointLight(0xffffff)
		point.position.set(400,200,300) // 点光源位置
		scene.add(point)
		
		// 环境光
		let ambient = new THREE.AmbientLight(0x444444)
		scene.add(ambient)
		
		console.log(scene)
		console.log(scene.children)
		
		/**
		 * 相机设置
		 */
		let width = window.innerWidth //窗口宽度
		let height = window.innerHeight //窗口高度
		let k = width / height // 窗口宽高比
		let s = 200 // 三维场景显示范围控制系数，系数越大，显示的范围越大
		// 创建相机对象
		let camera =
			new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000)
		camera.position.set(200, 300, 200) // 设置相机位置
		camera.lookAt(scene.position)
		
		/**
		 * 创建渲染器对象
		 */
		let renderer = new THREE.WebGLRenderer()
		//设置渲染区域尺寸
		renderer.setSize(width, height)
		//设置背景色
		renderer.setClearColor(0xb9d3ff, 1)
		// body元素中插入canvas对象
		document.body.appendChild(renderer.domElement)
		//执行渲染操作
		renderer.render(scene,camera)
	</script>
</html>
